<template>
	<div class="back_contain_n">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index" :class="{'active': viewType == item.key}"
				@click="changeView(item)">
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.gradeValue" placeholder="规格"></el-input>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="info">
			<div class="text">规格数量:{{gradeValueNum}}</div>
			<div @click="exportExcel" class="download"><i class="el-icon-download"></i> 下载</div>
		</div>
		<!-- table -->

		<sys-table ref="systable" :isMultipleSelection="false" :tableData="tableData" :tableLoading="tableLoading"
			:tableHeader="tableHeader" :scopeWidth="120" :backCount="backCount" :isOperate="false"
			@getBackData="getList">
		</sys-table>
		<form action="/api/jinl/order/exportInventoryInfo" method="post" style="display: none;"
			ref="downloadContentFile">
			<input name="queryJson" :value="queryJson" />
		</form>
	</div>
</template>

<script>
	import { formatDate } from "@/plugins/formatDate";
	import { getStore } from "@/plugins/localStore";

	export default {
		data() {
			return {
				queryJson: '',
				viewType: '0',
				paramList: [
					{ name: "单支连排", key: '0', tableType: '0' },
					{ name: "多支", key: '1', tableType: '1' },
					{ name: "伸缩", key: '2', tableType: '2' },
					{ name: "U型", key: '3', tableType: '3' },
				],
				queryForm: {
					gradeValue: '',
				},
				tableLoading: true, //table刷新
				backCount: 0,
				tableData: [],
				tableHeader: [],
				gradeValueNum: 0
			}
		},
		methods: {
			changeView(val) {
				this.viewType = val.key;
				this.getList()
			},
			getList(startIndex, pageRow) {//获取表格数据
				let self = this;
				self.tableLoading = true;
				let param = {
					itemId: this.paramList[this.viewType].name,
					gradeValue: this.queryForm.gradeValue
				}
				self.$http({
					url: "/jinl/order/getCurrentInventory",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "gradeValue", "columnName": "规格" },
							{ "columnValue": "reportedQuantity", "columnName": "报工数" },
							{ "columnValue": "quantityInStock", "columnName": "出库数" },
							{ "columnValue": "currentInventory", "columnName": "节余（库存）" },
						];

						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
							self.gradeValueNum = resp.result[0].gradeValueNum;
						} else {
							self.backCount = 0;
							self.gradeValueNum = 0;
						}
					}
				})
			},
			searchReset() { //重置搜索
				this.queryForm = {
					gradeValue: '',
				};
				this.getList();
			},
			exportExcel() {
				let user = getStore();
				let self = this;
				let queryForm = {
					itemId: this.paramList[this.viewType].name,
					name: user.userName,
				};
				queryForm.name = encodeURIComponent(queryForm.name);
				queryForm.itemId = encodeURIComponent(queryForm.itemId);
				self.queryJson = JSON.stringify(queryForm);
				self.$nextTick(() => {
					self.$refs.downloadContentFile.submit();
				})
			},

		},
		mounted() {
			let self = this;
			self.getList(self.viewType)
		},

	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px 20px 5px;
	}

	.text {
		font-size: 14px;
		color: #666;
	}

	.download {
		background: #67C23A;
		border: 1px solid #67C23A;
		color: #ffffff;
		border-radius: 5px;
		text-align: center;
		display: inline-block;
		height: 26px;
		line-height: 26px;
		padding: 0 10px;
		cursor: pointer;
		width: 80px;
		border-radius: 20px;
		&:hover {
			transition: all .3s;
			opacity: .8;
		}

	}

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 120px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}

			.nums {
				position: absolute;
				right: 5px;
				top: 0;
				background: #f44336;
				color: #fff;
				height: 16px;
				line-height: 16px;
				font-weight: 400;
				border-radius: 8px;
				font-size: 12px;
				padding: 0 5px;
			}
		}
	}
</style>